<template>
  <div class="card shadow" :class="type === 'dark' ? 'bg-default' : ''">
    <div
      class="card-header border-0"
      :class="type === 'dark' ? 'bg-transparent' : ''"
    >
      <div class="row align-items-center">
        <div class="col-md-8">
          <base-button outline type="secondary">
            <i class="ni ni-bullet-list-67"></i>
            {{ title }}
          </base-button>
        </div>
        <div class="col-md-4">
          <div class="input-group">
            <input
              type="text"
              placeholder="请输入标题关键字进行搜索..."
              class="form-control"
              valid="true"
              @input="search()"
              v-model="searchKey"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="table-responsive">
      <base-table
        class="table align-items-center table-flush"
        :class="type === 'dark' ? 'table-dark' : ''"
        :thead-classes="type === 'dark' ? 'thead-dark' : 'thead-light'"
        tbody-classes="list"
        :data="tableData"
      >
        <template slot="columns">
          <th></th>
          <th>队标</th>
          <th>队伍名称</th>
          <th>队长</th>
          <th>标语</th>
          <th>人数</th>
          <th>内容</th>
          <th>更新时间</th>
          <th>状态</th>
          <th>操作</th>
        </template>

        <template slot-scope="{ row }">
          <td></td>

          <td scope="row">
            <div class="media align-items-center">
              <a href="#" class="avatar avatar-sm rounded-circle">
                <img alt="Image placeholder" :src="row.teamavatarurl" />
              </a>
            </div>
          </td>
          <td class="budget">{{ row.teamname }}</td>
          <td class="budget">{{ row.leadername }}</td>
          <td class="badge-dot mr-4">{{ row.teamdes }}</td>
          <td class="badge-dot mr-4">
            {{ row.currentmember }}/{{ row.maxmember }}
          </td>
          <td class="badge-dot mr-4">
            {{row.totalyuedu}}
          </td>
          <td class="badge-dot mr-4">{{ row.updatetime }}</td>
          <td class="avatar-group">{{ row.status }}</td>
          <td>
            <div class="d-flex align-items-center">
              <base-button
                outline
                type="primary"
                size="sm"
                @click="saveTeamArts(row.id, row.teamname)"
                >添加图文</base-button
              >

              <base-button
                outline
                type="primary"
                size="sm"
                @click="findTeamArts(row.id)"
                >查看图文</base-button
              >
              <base-button
                outline
                type="primary"
                size="sm"
                @click="edit(row.id)"
                >编辑</base-button
              >
              <base-button outline type="warning" size="sm" @click="del(row.id)"
                >删除</base-button
              >
            </div>
          </td>
        </template>
      </base-table>
    </div>

    <div class="card-footer d-flex justify-content-center">
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <base-pagination
          :value="pageList.newPageValue"
          :total="pageList.totalRecords"
          :page-count="pageList.totalPages"
          @input="page(arguments)"
          ref="pagechild"
          align="center"
        ></base-pagination>
      </div>
      <div class="col-md-2"></div>
      <div>
        <modal :show.sync="delModal">
          <template slot="header">
            <h5 class="modal-title" id="exampleModalLabel">提示框</h5>
          </template>
          <div>确定删除小队记录吗？</div>
          <template slot="footer">
            <base-button type="secondary" @click="delModal = false"
              >关闭</base-button
            >
            <base-button type="primary" @click="confirmDelete"
              >确认删除</base-button
            >
          </template>
        </modal>
      </div>
    </div>
  </div>
</template>
<script>
import {
  findLdTeamsByPageApi,
  delLdTeamByIdApi,
} from "~/config/api/ldteamservice";
import dateTools from "~/config/utils/date-tools";
import tableDataTools from "~/config/utils/tabledata-tools";
export default {
  name: "projects-table",
  props: {
    type: {
      type: String,
    },
    title: String,
  },
  data() {
    return {
      delModal: false,
      searchKey: "",
      tableData: [
        {
          id: 1,
          teamavatarurl: "队标",
          teamname: "队伍名称",
          leadername: "队长",
          teamdes: "标语",
          currentmember: 1,
          maxmember: 99,
          updatetime: 1970 - 1 - 1,
          status: "启用",
        },
      ],
      pageList: {
        totalRecords: 100,
        totalPages: 10,
        newPageValue: 1,
        perPageSize: 50,
      },
    };
  },
  mounted() {
    this.findLdTeamsList();
  },
  methods: {
    search: function () {
      this.findLdTeamsList();
    },
    page: function (args) {
      this.pageList.newPageValue = args[0];
      this.findLdTeamsList();
    },

    async findLdTeamsList() {
      let params = {
        start: this.pageList.newPageValue,
        length: this.pageList.perPageSize,
        searchKey: this.searchKey,
      };
      await findLdTeamsByPageApi(params).then((res) => {
        if (res.sucflag) {
          this.pageList.totalRecords = res.totalrecords;
          this.pageList.totalPages = res.totalPage;
          let datalist = [];
          let bl = res.beanlist;
          for (let i in bl) {
            let data = {
              id: bl[i].id,
              teamavatarurl: bl[i].teamavatarurl,
              teamname: bl[i].teamname,
              teamdes: bl[i].teamdes,
              currentmember: bl[i].currentmember,
              maxmember: bl[i].maxmember,
              leadername: bl[i].leadername,
              totalyuedu:bl[i].totalyuedu,
              updatetime: dateTools.formatDateTimeLongToStr(bl[i].updatetime),
              status: tableDataTools.filterStatus(bl[i].status),
            };
            datalist.push(data);
          }
          this.tableData = datalist;
        }
      });
    },

    saveTeamArts: function (id, teamname) {
      this.$router.push({
        name: "ldteam-ldteamarts",
        query: {
          action: "save",
          teamid: id,
          teamname: teamname,
        },
      });
    },
    findTeamArts: function (id) {
      this.$router.push({
        name: "ldteam-ldteamartssinglelist",
        query: {
          action: "find",
          teamid: id,
        },
      });
    },
    edit: function (id) {
      this.$router.push({
        name: "ldteam-ldteam",
        query: {
          action: "edit",
          id: id,
        },
      });
    },
    /**
     * 触发删除
     */
    del: function (id) {
      this.delModal = true;
      this.delId = id;
    },
    /**
     * 确认删除
     */
    confirmDelete: function () {
      this.deleteRecord(this.delId);
      this.delModal = false;
    },
    async deleteRecord(id) {
      let params = {
        id: id,
      };
      await delLdTeamByIdApi(params).then((res) => {
        if (res.sucflag) {
          this.findLdTeamsList();
        }
      });
    },
  },
};
</script>
<style>
</style>